<template>
  <div class="audio">
    <div class="audio_top">
      <div class="audio_left fl">
        <img src="./images/109951163117390906.jpg" alt="">
        <audio :src="url" autoplay />
      </div>
      <div class="audio_right fr">
        <div class="audio_controls">
          <div class="volume_controls fl">
            <button class="audio_mute kj">静音</button>
            <div class="volume_bar kj">
              <div class="volume_bar_value" />
            </div>
            <button class="volume_max kj">最大音量</button>
          </div>
          <div class="play_controls fl">
            <button class="audio_previous kj">上一曲</button>
            <button class="audio_play kj" @click="play">播放</button>
            <button class="audio_next kj">下一曲</button>
            <button class="audio_stop kj">暂停</button>
          </div>
          <div class="toggles_controls fl">
            <button class="audio_repeat kj">重复</button>
            <button class="audio_shuffle kj">随机</button>
          </div>
        </div>
        <div class="timeStart">00:00</div>
        <div class="timeEnd">00:00</div>
        <div class="list_toggles kj">列表</div>
      </div>
    </div>
    <div class="progress_bar fl">
      <div class="progress_bar_value" />
    </div>
    <div class="list_bottom">
      <ul>
        <li id="1.mp3">
          <a
            href="javascript:;"
          ><strong>1</strong>. 3_key - Autumn rain（未修改版）.mp3</a>
        </li>
        <li id="2.mp3">
          <a
            href="javascript:;"
          ><strong>2</strong>. Alan Walker - Spectre.mp3</a>
        </li>
        <li id="3.mp3">
          <a href="javascript:;"><strong>3</strong>. a_hisa - Caravan.mp3</a>
        </li>
        <li id="4.mp3">
          <a
            href="javascript:;"
          ><strong>4</strong>. Acro Jazz Laboratories - Dust Trail.mp3</a>
        </li>
        <li id="5.mp3">
          <a
            href="javascript:;"
          ><strong>5</strong>. Acro Jazz Laboratories - Wish.mp3</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WyyAudio',
  data() {
    return {
      url: 'http://m7.music.126.net/20210128181456/d109140b7362f80148bc0ff49f69c4bb/ymusic/5bf5/86cd/510a/2c64a246dfedb6f5b17b4ac09802131d.mp3'
    }
  },
  methods: {
    play(e) {
      console.log(e)
    }
  }
}
var playbtn = document.querySelector('.audio_play')
console.log(playbtn)
// playbtn.addEventListener('click', function() {
//   console.log(11)
// })
// playbtn.click()
</script>

<style lang="scss" scoped>
.fl {
  float: left;
}
.fr {
  float: right;
}
.kj {
  cursor: pointer;
  text-indent: -999px;
  overflow: hidden;
  border: none;
  outline: none;
}
.click {
  background-color: rgba(000, 000, 000, 0.6);
}
// 音乐播放控件整体
.audio {
  position: relative;
  width: 480px;
  height: 94px;
  background-color: #130519de;
  // z-index: 999;
  // margin: 200px auto;
  // 主体部分
  ul,
  li {
    list-style: none;
  }
  .audio_top {
    // 主体左部分
    .audio_left {
      width: 90px;
      height: 90px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    // 主体右部分
    .audio_right {
      width: 390px;
      height: 90px;
      position: relative;
      // 控件部分
      .audio_controls {
        height: 90px;
        line-height: 90px;
        // 音量控件
        .volume_controls {
          margin-left: 40px;
          // 静音
          .audio_mute {
            width: 18px;
            height: 15px;
            background: url(./images/player.png) 0 -170px no-repeat;
            &:hover {
              background: url(./images/player.png) -19px -170px no-repeat;
            }
          }
          // 静音点击后的样式
          .muteT {
            background: url(./images/player.png) -60px -170px no-repeat;
            &:hover {
              background: url(./images/player.png) -79px -170px no-repeat;
            }
          }
          // 音量最大
          .volume_max {
            width: 18px;
            height: 15px;
            background: url(./images/player.png) 0 -186px no-repeat;
            &:hover {
              background: url(./images/player.png) -19px -186px no-repeat;
            }
          }
          // 音量条控件
          .volume_bar {
            background-color: #5c4169;
            width: 50px;
            height: 3px;
            display: inline-block;
            position: relative;
            top: -4px;
            border-radius: 3px;
            cursor: pointer;
            .volume_bar_value {
              width: 80%;
              height: 3px;
              background-color: #6646a1;
            }
          }
        }
        // 播放控件
        .play_controls {
          .audio_previous,
          .audio_next,
          .audio_stop {
            width: 28px;
            height: 28px;
            margin-top: 6px;
          }
          // 上一曲
          .audio_previous {
            background: url(./images/player.png) 0 -112px no-repeat;
            &:hover {
              background: url(./images/player.png) -29px -112px no-repeat;
            }
          }
          // 下一曲
          .audio_next {
            background: url(./images/player.png) 0 -141px no-repeat;
            &:hover {
              background: url(./images/player.png) -29px -141px no-repeat;
            }
          }
          // 暂停
          .audio_stop {
            background: url(./images/player.png) 0 -83px no-repeat;
            &:hover {
              background: url(./images/player.png) -29px -83px no-repeat;
            }
          }
          // 播放/暂停
          .audio_play {
            width: 40px;
            height: 40px;
            background-image: url(./images/player.png);
            background-repeat: no-repeat;
            background-color: transparent;
            &:hover {
              background-position: -41px 0;
            }
          }
          // 暂停的样式
          .playT {
            background-position: 0 -42px;
            &:hover {
              background-position: -41px -42px;
            }
          }
        }
        // 部放模式切换控件
        .toggles_controls {
          .audio_repeat,
          .audio_shuffle {
            width: 25px;
            height: 18px;
            line-height: 100%;
          }
          // 循环播放
          .audio_repeat {
            background: url(./images/player.png) 0 -291px no-repeat;
            &:hover {
              background: url(./images/player.png) -30px -291px no-repeat;
            }
          }
          .repeat_click {
            background: url(./images/player.png) -30px -291px no-repeat;
          }
          // 随机播放
          .audio_shuffle {
            background: url(./images/player.png) 0 -271px no-repeat;
            &:hover {
              background: url(./images/player.png) -30px -271px no-repeat;
            }
          }
          .shuffle_click {
            background: url(./images/player.png) -30px -271px no-repeat;
          }
        }
      }
      // 当前播放时长
      .timeStart {
        height: 19px;
        position: absolute;
        top: 70px;
        left: 0;
        color: #fff;
      }
      // 歌曲总时长
      .timeEnd {
        height: 19px;
        position: absolute;
        top: 70px;
        right: 0;
        color: #fff;
      }
      // 下拉列表切换按钮
      .list_toggles {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 30px;
        cursor: pointer;
        color: #fff;
        background: url(./images/player.png) -88px -85px no-repeat;
        &:hover {
          background: url(./images/player.png) -115px -85px no-repeat;
        }
      }
    }
  }
  // 播放进度条
  .progress_bar {
    width: 480px;
    height: 4px;
    background-color: #8c738ef2;
    .progress_bar_value {
      width: 0%;
      height: 4px;
      background-color: #7e60ad;
    }
  }
  // 下拉列表
  .list_bottom {
    position: absolute;
    top: 95px;
    width: 480px;
    height: 100px;
    background-color: rgba(000, 000, 000, 0.4);
    overflow: hidden;
    transition: height 1s;
    li {
      a {
        display: block;
        padding-left: 5px;
        color: #fff;
        font-size: 14px;
      }
    }
  }
}
</style>
